import Vue from "vue"
import Vuex from "vuex"
import navCollapse from './navCollapse'

Vue.use(Vuex); // 调用Vuex的install方法,install里面 Vue.prototype.$store

// 集中式的管理状态(数据)
export default new Vuex.Store({
    state:{
        str:"vuex的值",
        lastName:"11111",
        fastName:"222222"
    },
    getters:{
        getName(state) { // 对数据进行处理并返回
            return state.lastName+''+state.fastName
        }
    },
    // 不能直接修改state里面的属性值,只能通过mutations里面的自定义方法改变
    // mutations里面修改state只支持同步修改,不支持异步,异步修改需要在actions里面
    mutations:{  // 组件通过mutations里面的自定义方法来改变state里面变量的值
        modify(state, payload) {   // 自定义方法(名字可以自定义)  state是上面的state, payload是组件传过来的参数
            console.log("modify方法");    
            console.log(state, payload);
            state.str="修改后得str"+payload
        }
    },
    modules:{  // modules里面的每个对象都有自己的state,getters,mutations,actions,modules,就是为了不把所有的数据都放到上面的state
        user:{
            state:{
                moName:"111moname"
            },
            getters:{},
            mutations:{},
            actions:{}
        },
        wode:{
            state:{},
            getters:{},
            mutations:{},
            actions:{}
        },
        navCollapse
    },
    actions:{ // 异步修改state的属性值
        modifyStr(context, payload) {
            console.log(context, payload);

            return new Promise((resolve, reject) =>{
                setTimeout(()=>{
                    context.commit('modify', payload)  // 这里是触发mutations里面的modify来改变值,跟在组件里使用同步改变值一样
                    resolve('请求成功')
                },2000);
            })
            
        }
    }
})